import React from 'react';
import { Layout, Typography, Card, Row, Col, Statistic, Button, message, Space } from 'antd';
import { UserOutlined, FileTextOutlined, AuditOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import '../App.css';

const { Header, Content } = Layout;
const { Title, Text } = Typography;

const AdminHome: React.FC = () => {
  const navigate = useNavigate();

  // 退出登录处理函数
  const handleLogout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('userInfo');
    localStorage.removeItem('loginMode');
    message.success('已成功退出登录');
    navigate('/admin/login');
  };

  // 企业审核页面处理函数
  const handleAudit = () => {
    message.info('企业审核功能开发中');
  };

  // 用户管理页面处理函数
  const handleUserManagement = () => {
    message.info('用户管理功能开发中');
  };

  // 系统设置页面处理函数
  const handleSettings = () => {
    message.info('系统设置功能开发中');
  };

  return (
    <Layout className="admin-layout">
      <Header style={{ background: '#1890ff', padding: '0 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <Title level={4} style={{ color: 'white', margin: 0 }}>系统管理后台</Title>
        </div>
        <Space>
          <Text style={{ color: 'white', marginRight: 16 }}>管理员账号</Text>
          <Button 
            icon={<LogoutOutlined />} 
            onClick={handleLogout} 
            type="text" 
            style={{ color: 'white' }}
          >
            退出登录
          </Button>
        </Space>
      </Header>
      
      <Content style={{ padding: '24px', minHeight: 'calc(100vh - 64px)' }}>
        <div className="admin-content">
          <div style={{ marginBottom: 24 }}>
            <Title level={3}>欢迎使用管理员后台</Title>
            <Text>您可以在此管理系统用户、审核企业信息以及进行系统配置</Text>
          </div>
          
          <Row gutter={[16, 16]}>
            <Col xs={24} sm={12} md={6}>
              <Card>
                <Statistic 
                  title="待审核企业" 
                  value={28} 
                  valueStyle={{ color: '#1890ff' }} 
                />
                <Button 
                  type="primary" 
                  block 
                  icon={<AuditOutlined />} 
                  style={{ marginTop: 16 }} 
                  onClick={handleAudit}
                >
                  前往审核
                </Button>
              </Card>
            </Col>
            
            <Col xs={24} sm={12} md={6}>
              <Card>
                <Statistic 
                  title="系统用户总数" 
                  value={1256} 
                  valueStyle={{ color: '#52c41a' }} 
                />
                <Button 
                  type="default" 
                  block 
                  icon={<UserOutlined />} 
                  style={{ marginTop: 16 }} 
                  onClick={handleUserManagement}
                >
                  用户管理
                </Button>
              </Card>
            </Col>
            
            <Col xs={24} sm={12} md={6}>
              <Card>
                <Statistic 
                  title="职位总数" 
                  value={328} 
                  valueStyle={{ color: '#faad14' }} 
                />
                <Button 
                  type="default" 
                  block 
                  icon={<FileTextOutlined />} 
                  style={{ marginTop: 16 }}
                  onClick={() => message.info('职位管理功能开发中')}
                >
                  职位管理
                </Button>
              </Card>
            </Col>
            
            <Col xs={24} sm={12} md={6}>
              <Card>
                <Statistic 
                  title="系统设置" 
                  value="配置" 
                  valueStyle={{ color: '#13c2c2' }} 
                />
                <Button 
                  type="default" 
                  block 
                  icon={<SettingOutlined />} 
                  style={{ marginTop: 16 }} 
                  onClick={handleSettings}
                >
                  系统设置
                </Button>
              </Card>
            </Col>
          </Row>
          
          <div style={{ marginTop: 24 }}>
            <Card title="快速操作">
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
                <Button type="primary" icon={<AuditOutlined />} onClick={handleAudit}>审核新注册企业</Button>
                <Button icon={<UserOutlined />} onClick={handleUserManagement}>用户管理</Button>
                <Button icon={<SettingOutlined />} onClick={handleSettings}>系统配置</Button>
                <Button danger onClick={handleLogout}>退出管理后台</Button>
              </div>
            </Card>
          </div>
        </div>
      </Content>
    </Layout>
  );
};

export default AdminHome;